<template>
  <view class="component">
    <view class="component-list">
      <view class="component-list-item" @click="onChangeTab(item)"
            :class="item.value === active?'component-list-item-active':''"
            v-for="item in list" :key="item.value">
        {{ item.label }}
      </view>
    </view>
  </view>
</template>

<script setup>
import {onLoad} from "@dcloudio/uni-app";

defineProps({
  list: {
    type: Array,
    default: () => [] // {label:string,value:any}[]
  },
  active: {
    type: [String, Number],
    default: '' // list中的value
  }
})

const emits = defineEmits(['change'])

onLoad(() => {
})

const onChangeTab = (e) => {
  emits('change', e)
}
</script>

<style lang="scss" scoped>
@import "tabs";
</style>
